<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Animations: Expansion of shorthand properties</title>
<link rel="help" href="https://www.w3.org/TR/web-animations-1/#calculating-computed-keyframes">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #block {
    background: green;
    background-position-x: 10px;
    height: 100px;
    width: 100px;
  }
</style>
<body>
  <div id="block"></div>
</body>
<script>
  function assert_background_position_at(time, x, y) {
    document.getAnimations()[0].currentTime = time;
    const target = document.getElementById('block');
    const style = getComputedStyle(target);
    assert_equals(style.backgroundPositionX, x,
                  `background-position-x @${time/10}% progress`);
    assert_equals(style.backgroundPositionY, y,
                  `background-position-y @${time/10}% progress`);
  }

  test(() => {
    const target = document.getElementById('block');
    target.animate([
      { background: 'red' },
      { backgroundPositionY: '10px', background: 'blue' }
    ], { duration: 1000 });
    // Animation is active in the semi-closed interval [0, 1000).
    // The background shorthand expands to its longhand counterparts with
    // background-position-(x|y) picking up the default value of 0%.
    // The explicit background-property-y in the second keyframe takes priority
    // over the value from expansion of the shorthand.
    const test_cases = [
      { time: -100, x: "10px", y: "0%" },
      { time: 0, x: "0%", y: "0%" },
      { time: 200, x: "0%", y: "calc(0% + 2px)" },
      { time: 500, x: "0%", y: "calc(0% + 5px)" },
      { time: 800, x: "0%", y: "calc(0% + 8px)" },
      { time: 1100, x: "10px", y: "0%" }
    ];
    test_cases.forEach(test => {
      assert_background_position_at(test.time, test.x, test.y);
    });
  }, 'Shorthand properties expand to longhand counterparts in computed ' +
     'keyframes.');
</script>
